<template>
  <div>
    <p class="text-[14px] text-[#333] leading-[20px] mb-[16px]"></p>
    <div>
      <div class="flex flex-wrap px-[8px] py-[8px] bg-[#FAFAFA] rounded-[8px]">
        <div
          class="w-[348px] mr-[16px] mb-[16px]"
          v-for="(item, index) in list"
          :key="`${costIdent}${index}`"
        >
          <div
            class="flex items-center justify-between mb-[4px] text-[14px] text-[#333] leading-[20px]"
          >
            <span>{{ label }}{{ index }}</span>
            <div>
              <span
                class="hover:text-[#2080f0] cursor-pointer iconfont icon-add"
                @click="handleAdd"
              ></span>
              <span
                class="hover:text-[#2080f0] cursor-pointer iconfont icon-jian"
                @click="handleDelete(index)"
                v-if="list.length > 1"
              >
              </span>
            </div>
          </div>
          <div>
            <VGroup>
              <el-select
                v-model="item.cost_attrs"
                placeholder="请选择物流属性"
                style="width: 360px"
                multiple
                collapse-tags
                collapse-tags-tooltip
              >
                <el-option
                  label="全选"
                  value="all"
                  @click.native="selectAll(item)"
                ></el-option>
                <el-option
                  v-for="attr in options['logisticsAttributes']"
                  :label="attr.label"
                  :value="attr.value"
                  :key="attr.value"
                />
              </el-select>
              <el-input-number v-model="item.cost_value" class="w-[158px]" :controls="false">
                <template #append>
                  <span>{{ costUnit }}</span>
                </template>
              </el-input-number>
            </VGroup>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  options: { type: Object, default: () => ({}) },
  costUnit: { type: String, default: "" },
  label: { type: String, default: "" },
  costIdent: { type: [Number, String], default: "" },
  data: { type: Array, default: () => [] },
});

const list = ref([{ cost_attrs: "" }]);
const {options} = toRefs(props)
watch(
  () => props.costIdent,
  (val) => {
    const _list = JSON.parse(JSON.stringify(list.value));
    list.value = _list.map((n) => ({ ...n, cost_ident: val }));
  },
  {
    immediate: true,
  }
);

watch(
  () => props.data,
  (val) => {
    if (!val?.length) return;
    const _list = [];
    val.map((n) => {
      if (n.cost_label === props.label) {
        _list.push({
          ...n,
          cost_ident: props.costIdent,
        });
      }
    });
    if (!_list.length) return;
    list.value = _list;
  },
  {
    immediate: true,
  }
);

const handleAdd = () => {
  list.value.push({
    cost_attrs: "",
    cost_value: "",
    cost_ident: props.costIdent,
  });
};

const handleDelete = (index) => {
  if (list.value === 1) return;
  list.value.splice(index, 1);
};


const selectAll = (val) => {
  let data = options.value?.['logisticsAttributes'];
  if (val?.cost_attrs?.length < data?.length) {
    val.cost_attrs = [];
    data?.map((item) => {
      val?.cost_attrs.push(
        item.value
      );
    });
   val.cost_attrs = val?.cost_attrs?.filter(
      (item) => item != "all"
    );
  } else {
    // 取消全选
    val.cost_attrs = [];
  }
};

const submit = () => {
  return new Promise((resolve, reject) => {
    resolve(JSON.parse(JSON.stringify(list.value)));
  });
};

defineExpose({ submit });
</script>
